.button {
  padding: 0 !important;

  &.button--loading {
    cursor: default;

    .label {
      transform: translate3d(-100%, 0, 0);
    }

    .loading {
      top: calc(50% - 7px);
      left: calc(50% - 9px);
    }
  }

  &:global(.button--filled) {
    .loading {
      fill: #fff;
    }
  }

  &:global(.button--filled.button--white) {
    .loading {
      fill: currentColor;
    }
  }

  &:global(.button--iconOnly) {
    .label {
      padding-left: 5px;
      padding-right: 5px;
    }
  }

  &:global(.button--small) {
    &.button--loading {
      .loading {
        width: 14px;
        top: 0;
        left: calc(50% - 5px);
      }
    }
  }
}

.content {
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  line-height: 1.3;
}

.label {
  transition: 0.2s ease-in-out;
  transition-property: transform;
  transform: translate3d(0, 0, 0);
  display: flex;
  align-items: center;
  padding: 5px 12px;
}

.loading {
  transition: 0.2s ease-in-out;
  transition-property: left;
  will-change: left;
  width: 15px;
  position: absolute;
  top: calc(50% - 8px);
  left: 100%;
  fill: var(--color-black);
}
